<template>
  <div class="qq_MV" id="content">
    <div class="qq_MV_section_inner">
      <div class="index__hd">
        <h2 class="index__tit"><i class="icon_txt"></i></h2>
      </div>
      <a class="index__more" href="#"> 更多><i class="icon_index_arrow sprite"></i> </a>
      <div class="mod_index_tab">
        <a class="index_tab__item">精选</a>
        <a class="index_tab__item">内地</a>
        <a class="index_tab__item">港台</a>
        <a class="index_tab__item">欧美</a>
        <a class="index_tab__item">韩国</a>
        <a class="index_tab__item">日本</a>
      </div>
      <div class="mod_playlist mod_slide">
        <div class="swiper-father">
          <div class="swiper-container" id="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="slide__list">
                  <ul class="playlist__list mod_playlist">
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>
                    <li class="playlist__item">
                      <div class="playlist__item_box">
                        <div class="playlist__cover mod_cover">
                          <a class="js_album" href="#">
                            <img class="playlist__pic"
                              src="//y.qq.com/music/photo_new/T015R640x360M101003C6fdj1dpp7J.jpg?max_age=2592000" />
                            <i class="mod_cover__icon_play js_play"> </i>
                          </a>
                        </div>
                        <h4 class="playlist__title">
                          <span class="playlist__title_txt">
                            <a title="《THE LONELIEST》" class="js_album" href="#"> 《寒露时》 </a>
                          </span>
                        </h4>
                        <div class="playlist__author">
                          <a title="白止" href="#">弦子</a>
                        </div>
                        <div class="playlist__author">
                          <span class="mv_list__listen"> <i
                              class="mv_list__listen_icon sprite iconfont icon-shipin"></i>2.2万 </span>
                        </div>
                      </div>
                    </li>

                  </ul>
                </div>
              </div>
            </div>
          </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination" id="sw-pa"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev" id="sw-bu-pr" ref="sw-bu-pr"></div>
          <div class="swiper-button-next" id="sw-bu-ne" ref="sw-bu-ne"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "zMV",
};
</script>

<script lang="ts" setup>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { onMounted, ref } from "vue";
onMounted(() => {
  new Swiper("#swiper", {
    spaceBetween: 20,
    speed: 1000, //切换时间
    loop: true, //无缝轮播
    pagination: {
      //小圆点
      el: ".swiper-pagination", //选择到小圆点容器
      clickable: true, //在控制小圆点是否可以被点击
    },
    navigation: {
      //左右按钮
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
  });
});
</script>

<style scoped>
/* 鼠标移入自动显示 */
.qq_MV:hover #sw-bu-pr {
  display: block;
  animation: pr 1s;
  left: -160px;
}
.qq_MV:hover #sw-bu-ne {
  display: block;
  animation: ne 1s;
  right: -160px;
}

/* 定义鼠标移入左右箭头的关键帧 */
@keyframes pr {
  0% {
    left: -300px;
  }

  100% {
    left: -160px;
  }
}

@keyframes ne {
  0% {
    right: -300px;
  }

  100% {
    right: -160px;
  }
}

/* 设置轮播图样式 对轮播图样式作二次修改 修改样式权重*/
#sw-pa {
  /* border: 1px solid red !important; */
  position: absolute;
  right: 50%;
  width: 60px;
  display: flex;
  justify-content: space-around;
  /* bottom: -120px; */
}

#sw-pa .swiper-pagination-bullet {
  /* border: 1px solid green !important; */
  position: absolute !important;
}

/* #swiper {
   border: 1px solid red !important;
} */
.swiper-container {
  /* border: 1px solid red !important; */
  width: 1200px;
  /* height: 532px; */
}

.swiper-father {
  /* border: 1px solid green !important; */
  height: 224px;
  /* width: 1700px; */
  position: relative;
}

#sw-bu-pr,
#sw-bu-ne {
  position: absolute !important;
  /* border: 1px solid red; */
  display: inline-block;
  width: 100px;
  height: 133px;
  text-align: center;
  line-height: 133px;
  background-color: #e1e1e1;
  color: #000;
  top: 133px;
  z-index: 200;
}

#sw-bu-pr,
#sw-bu-ne {
  display: none;
}

#sw-bu-pr {
  left: -300px;
}

#sw-bu-ne {
  right: -300px;
}


/* 第七部分 */
.index__hd {
  position: relative;
  padding-top: 4.16667%;
  padding-bottom: 2%;
}

.index__hd .index__tit {
  margin: 0 auto;
  width: 196px;
  height: 40px;
  font-weight: bold;
  font-style: normal;
  /* background-image: url("./bac.png"); */
  background-image: -webkit-image-set(url("/src/assets/bac.png") 1x, url("/src/assets/bac.png") 2x);
  background-position: 0 100px;
}

.qq_MV {
  height: 687px;
  background-color: #fafafa;
}

.qq_MV_section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.qq_MV_section_inner a.index__more {
  position: absolute;
  right: 0;
}

.qq_MV_section_inner .mod_index_tab {
  height: 50px;
  text-align: center;
}

.qq_MV_section_inner .mod_index_tab .index_tab__item {
  margin: 0 24px;
  font-size: 14px;
  color: #000;
}

.qq_MV_section_inner .playlist__list {
  height: 616px;
  width: 1220px;
  /* display: flex;
  flex-wrap: wrap; */
  font-size: 0;
}

.qq_MV_section_inner .playlist__list .playlist__item {
  height: 206px;
  display: inline-block;
  width: 20%;
  /* padding-bottom: 25px; */
  margin-bottom: 25px;
  /* border: 1px solid red; */
  padding-right: 0px !important;
}

.qq_MV_section_inner .playlist__list .playlist__item .playlist__cover img {
  width: 224px;
  height: 126.3px;
  margin-bottom: 15px;
  /* border: 1px solid red; */
}

.qq_MV_section_inner .playlist__list .playlist__item h4 {
  width: 224px;
  height: 22px;
  /* border: 1px solid red; */
  font-size: 14px;
  color: #000;
}

.qq_MV_section_inner .playlist__list .playlist__item .playlist__author a {
  width: 224px;
  height: 22px;
  /* border: 1px solid red; */
  font-size: 14px;
  color: #999;
}

.qq_MV_section_inner .playlist__list .playlist__item .playlist__title a {
  width: 224px;
  height: 22px;
  /* border: 1px solid red; */
  font-size: 14px;
  color: #000;
}

.qq_MV_section_inner .playlist__list .playlist__item .playlist__author span {
  width: 224px;
  height: 22px;
  /* border: 1px solid red; */
  font-size: 14px;
  color: #999;
}

.qq_MV_section_inner .playlist__list .playlist__item .playlist__author span i {
  width: 12px;
  height: 19px;
  /* border: 1px solid red; */
  font-size: 14px;
  margin-right: 6px;
  color: #999;
  display: inline-block;
}

/* 修改swiper底部小圆点样式 */
.swiper-pagination-bullet {
  background-color: #aeaeae;
}
</style>
